<template>
  <a-modal
    v-model="visible"
    title="注册账号"
    @ok="submit"
    :footer="null"
    width="480px"
    centered>
    <a-input class="m_input" v-model="form.user_name" placeholder="请输入用户姓名">
      <template #prefix>
        <img src="@/assets/login/login_user.png" class="img" />
      </template>
    </a-input>

    <a-input class="m_input" v-model="form.user_telephone" placeholder="请输入手机号码">
      <template #prefix>
        <img src="@/assets/login/login_user.png" class="img" />
      </template>
    </a-input>

    <a-input-password class="m_input" v-model="form.account_password" placeholder="请输入密码">
      <template #prefix>
        <img src="@/assets/login/login_lock.png" alt class="img" />
      </template>
    </a-input-password>

    <div class="code_box">
      <a-input class="m_input" v-model="form.user_email" style="width: 70%" placeholder="请输入邮箱">
        <template #prefix>
          <img src="@/assets/login/login_mail.png" class="img" />
        </template>
      </a-input>
      <a-button class="code_button" @click="sendEmail" :disabled="disabled">{{
        !disabled ? '获取验证码' : `${time}s`
      }}</a-button>
    </div>

    <a-input class="m_input" v-model="form.code" placeholder="请输入邮箱验证码">
      <template #prefix>
        <img src="@/assets/login/login_safe.png" class="img" />
      </template>
    </a-input>

    <a-button class="m_button" @click="submit" :loading="loading">提交</a-button>
  </a-modal>
</template>

<script>
import { sendEmail } from '@/api/other'
import { register } from '@/api/login'

export default {
  name: 'Register',

  data () {
    return {
      visible: false,
      loading: false,
      disabled: false,
      time: 60,
      form: { user_name: '', user_telephone: '', account_password: '', user_email: '', code: '' }
    }
  },

  mounted () {},

  methods: {
    open () {
      this.visible = true
    },

    sendEmail () {
      sendEmail({ email: this.form.user_email }).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.setFreeze()
        } else this.$message.error(res.msg)
      })
    },

    setFreeze () {
      this.disabled = true
      const freeze = setInterval(() => {
        if (this.time > 1) this.time--
        else {
          this.time = 60
          this.disabled = false
          clearInterval(freeze)
        }
      }, 1000)
    },

    submit () {
      register(this.form)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.visible = false
          } else this.$message.error(res.msg)
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="less" scoped>
.m_input {
  margin-bottom: 16px;
  height: 48px;
  background: #ffffff;

  :deep(.ant-input) {
    height: 100%;
    padding-left: 48px;
  }

  .img {
    width: 28px;
    height: 28px;
  }
}

.code_box {
  display: flex;

  .code {
    flex: 1;
    margin-left: 8px;
    height: 48px;
    cursor: pointer;
  }

  .code_button {
    margin-left: 8px;
    flex: 1;
    height: 48px;
    background: #ffffff;
  }
}
.m_button {
  margin: 16px 0 0;
  width: 100%;
  height: 56px;
  background: #1890ff;
  border-radius: 2px;
  font-size: 16px;
  color: #ffffff;
  line-height: 24px;
  border-color: #1890ff;
}
</style>
